<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{ font-size: 13px; font-family: "Microsoft Yahei", "幼圆", Tahoma, 'simsun'; }
        a{ text-decoration: none; }
        .tCenter{ text-align: center; }
        .red{ color: #c30; }
        .btn{ display: inline-block;padding: 5px 10px;background: #3498db; color: #FFFFFF; margin: 0 5px; }
        #tbl{ border-collapse: collapse; width: 100%; }
        #tbl tr th,
        #tbl tr td{ border: 1px solid #CCCCCC; padding: 5px; text-align: center; }
        #tbl tbody tr:nth-child(odd){ background-color: #EFEFEF; }
        #tbl tbody tr td.action{ width: 150px; }
    </style>
</head>
<body>
<a href="javascript:void(0);" class="btn" id="btn-add">+Add</a>
<table id="tbl"></table>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.dataTable.js"></script>
<script>
    $('#tbl').dataTable({
        columns: [
            {'title':'订单编号', column: 'order_code'},
            {'title':'始发城市', column: 'start_city_name', className: 'red'},
            {'title':'到达城市', column: 'end_city_name', className: 'red'},
            {'title':'开始时间', column: 'start_date'},
            {'title':'结束时间', column: 'end_date'},
            {'title':'来源', column: 'source', values: [{ text:'微信', value:'wechat' }, { text:'渠道商', value:'partner' }]},
            {'title':'操作',className:'action', actions: [
                { action: 'edit', callback: function(dataItem){
                    console.log(dataItem);
                }},
                { action: 'delete', callback: function(dataItem){
                    console.log(dataItem);
                }}
            ]}
        ],
        dataSource: {
            read: {
                url:'json.php',
                type: 'GET'
            }
        }
    });
</script>
</body>
</html>